<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="list" lineWidth="80" lineColor="rgba(15, 83, 172, 1)" :activeStyle="activeStyle"
				:scrollable="false" :inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @change="tabsClick"
				:current="current">
			</u-tabs>
		</u-sticky>
		<view class="top" v-if="current==0 && learningInfo.userCourseList.length">
			学习进度: {{ learningInfo.finishNum + '/' + learningInfo.totalNum}}
		</view>
		<view class="top" v-else-if="current==1 && examInfo.userExamList.length">
			考试进度: {{ examInfo.hadExamNum + '/' + examInfo.totalNum}}
		</view>
		<view class="top" v-else-if="current == 2 && signInfo.trainSignList.length">
			签名进度: {{ signInfo.signNum + '/' + signInfo.totalNum}}
		</view>
		<!-- <view class="line8"></view> -->
		<view v-if="current==0">
			<view v-if="learningInfo.userCourseList.length" class="list" v-for="item in learningInfo.userCourseList">
				<view class="itemList">
					<view class="name">
						{{item.userName}}
					</view>
					<view>
						{{item.finishTime}}
					</view>
				</view>
				<view
					:class="item.studyStatus==0 ? 'hui' : item.studyStatus==1 ? 'lan': item.studyStatus == 2?'lv':'hong'">
					{{item.studyStatus==0 ? '未学习' : item.studyStatus==1 ? '学习中': item.studyStatus == 2?'已学习':'已逾期'}}
				</view>
			</view>
			<view class="empty-data" v-if="!learningInfo.userCourseList.length">
				<u-empty mode="data" :text="'暂无数据,当前培训未关联课程'" :marginTop="100"></u-empty>
			</view>
		</view>
		<view v-if="current==1">
			<view v-if="examInfo.userExamList.length" class="list" v-for="item in examInfo.userExamList">
				<view class="itemList">
					<view class="name">
						{{item.userName}}
					</view>
					<view>
						{{item.finishTime}}
					</view>
				</view>
				<view :class="item.examFlag==2 ? 'hong' : item.examFlag==1 ? 'lan': 'lv'">
					{{item.examFlag==1 ? '待考试' : item.examFlag==2 ? '缺考': '已考试'}}
				</view>
			</view>
			<view class="empty-data" v-if="!examInfo.userExamList.length">
				<u-empty mode="data" :text="'暂无数据,当前培训未关联考试'" :marginTop="100"></u-empty>
			</view>
		</view>
		<view v-if="current==2">
			<view v-if="signInfo.trainSignList.length" class="list" v-for="item in signInfo.trainSignList">
				<view class="itemList">
					<view class="name">
						{{item.name}}
					</view>
					<view style="color: rgba(140, 140, 140, 1);" v-if="item.signFlag==1">
						{{item.signTime}}
					</view>
				</view>
				<view class="hui" v-if="item.signFlag==0">
					未签到
				</view>
				<view style="color: #0F53AC;" v-else @click="selectSign(item.signImg)">
					查看签名
				</view>
			</view>
			<view class="empty-data" v-if="!signInfo.trainSignList.length">
				<u-empty mode="data" :text="'暂无数据,当前培训无需签到'" :marginTop="100"></u-empty>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '课程进度',
						disabled: false
					},
					{
						name: '考试进度',
						disabled: false
					},
					{
						name: '签到进度',
						disabled: false
					}
				],
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)'
				},
				activeStyle: {
					color: 'rgba(15, 83, 172, 1)',
					fontWeight: 'bold',
					transform: 'scale(1)'
				},
				itemStyle: {
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx'
				},
				current: 0,
				trainId: '',
				learningInfo: {
					userCourseList: []
				},
				examInfo: {
					userExamList: []
				},
				signInfo: {
					trainSignList: []
				},
				// isKecheng: true,
				// isKaoshi: true,
				// isQiandao: true
			}
		},
		onLoad(options) {
			this.trainId = options.trainId
			// this.isKecheng = opions.isKecheng
			// this.isKaoshi = opions.isKaoshi
			// this.isQiandao = opions.isQiandao
			// if (options.isKecheng == 'false') {

			// 	this.list[0].disabled = true
			// }
			// if (options.isKaoshi == 'false') {
			// 	this.list[1].disabled = true
			// }
			// if (options.isQiandao == 'false') {
			// 	this.list[2].disabled = true
			// }
			if (options.type == 0) {
				this.getLearning()
			} else if (options.type == 1) {
				this.getExaming()
			} else {
				this.getSigning()
			}
			// setTimeout(()=>{
			this.current = options.type - 0
			// },2000)
		},

		methods: {
			tabsClick(e) {
				console.log(e)
				if (e.disabled == true) {
					return
				}
				this.current = e.index
				if (this.current == 0) { //课程进度
					this.getLearning()
				}
				if (this.current == 1) { //考试进度
					this.getExaming()
				} else { //签到进度
					this.getSigning()
				}
			},

			//获取学习进度
			getLearning() {
				uni.$u.http.get(
					`/train/mobile/train/userCourseList/${this.trainId}`
				).then(res => {
					if (res.code == 0) {
						this.learningInfo = res.data
					}
				}).catch(err => {})
			},

			//获取考试进度
			getExaming() {
				uni.$u.http.get(
					`/train/mobile/train/userExamList/${this.trainId}`
				).then(res => {
					if (res.code == 0) {
						this.examInfo = res.data
					}
				}).catch(err => {})
			},

			//获取签到进度
			getSigning() {
				uni.$u.http.get(
					`/train/mobile/train/signList/${this.trainId}`
				).then(res => {
					if (res.code == 0) {
						this.signInfo = res.data
					}
				}).catch(err => {})
			},

			//查看签名
			selectSign(signImg) {
				uni.$u.http.get(
					`/base/upload/bindFileUrl?fileUrl=${signImg}`
				).then(res => {
					if (res.code == 0) {
						uni.navigateTo({
							url: `/pages/subPackagesD/mycenter/sginselect?url=
        				${encodeURIComponent(JSON.stringify(res.data))}&noShow=true`
						})
					}
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		padding: 28rpx 32rpx;
		background: #F5F5F5;
	}

	.list {
		padding: 32rpx 32rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #f5f5f5;

		.itemList {
			display: flex;

			.name {
				color: #2B2B2B;
				margin-right: 20rpx;
			}
		}
	}

	.hui {
		width: 120rpx;
		height: 52rpx;
		font-size: 12px;
		line-height: 52rpx;
		border-radius: 8rpx;
		background: rgba(125, 125, 125, 0.2);
		color: rgba(102, 102, 102, 1);
		text-align: center;
	}

	.lan {
		width: 120rpx;
		height: 52rpx;
		font-size: 12px;
		line-height: 52rpx;
		border-radius: 8rpx;
		background: rgba(33, 115, 222, 0.2);
		color: rgba(25, 98, 224, 1);
		text-align: center;
	}

	.lv {
		width: 120rpx;
		height: 52rpx;
		font-size: 12px;
		line-height: 52rpx;
		border-radius: 8rpx;
		background: rgba(40, 184, 105, 0.2);
		color: rgba(40, 184, 105, 1);
		text-align: center;
	}

	.hong {
		width: 120rpx;
		height: 52rpx;
		font-size: 12px;
		line-height: 52rpx;
		border-radius: 8rpx;
		background: rgba(255, 77, 77, 0.2);
		color: rgba(255, 77, 77, 1);
		text-align: center;
	}
</style>
